<template>
	<div class="app-container">
		<div>
			<p class="dialogTitle title">当前地震事件:
				<span v-if="currentEvent">{{ currentEvent.eventName }}</span>
				<span v-else>请在地震事件管理中设置当前地震事件</span>
			</p>
		</div>
		<el-row>
			<el-col :span="8">
				<div style="font-size: 16px;font-weight: bold;">&nbsp;&nbsp;1）确定中高档装修房屋数量所占比例</div>
			</el-col>
		</el-row>
		<el-row :gutter="10" class="mb8" style="margin-top: 10px;">
			<el-col :span="8">
				<div>（计算值默认中值，可以修改，修改值必须在对应的范围内）</div>
			</el-col>
			<el-col :span="4">
				<div>中高档装修房屋数量所占比例</div>
			</el-col>
			<el-col :span="4">
				<div>用百分比（%）表示</div>
			</el-col>
		</el-row>
		<el-row style="margin-top: 10px;">
			<el-col :span="10">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
					<!--<el-form-item label="评估子区" prop="xstmId">
						<el-select v-model="queryParams.xstmId" placeholder="请选择评估子区" @change="changeSubarea" clearable>
              <el-option v-for="item in option" :key="item.xstmId" :label="item.evaluationSubareaName" :value="item.xstmId">
              </el-option>
            </el-select>
					</el-form-item>-->
					<el-form-item>
						<el-button type="primary" @click="handleUpdate">修改</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row style="margin-top: 10px;">
			<el-col :span="16">
				<el-form ref="formRef" :model="form" :rules="rules" label-width="0px">
					<table align="center" style="width: 100%;border-collapse: collapse;">
						<tr style="background: #D9D9D9;height: 35px;">
							<td align="center" :rowspan="2" style="width: 150px;">请选择</td>
							<td align="center" :rowspan="2" :colspan="2" style="width: 200px;">城市规模</td>
							<td align="center" :colspan="2">房屋类型</td>
						</tr>
						<tr style="background: #D9D9D9;height: 35px;">
							<td align="center" style="width: 200px;">钢筋混凝土房屋</td>
							<td align="center" style="width: 200px;">砌体房屋</td>
						</tr>
						<tr>
							<td align="center" :rowspan="3">
								<el-radio v-model="form.ratioType" label="0" @change="handleCheckedCitiesChange"><span></span></el-radio>
							</td>
							<td align="center" :rowspan="3">大城市</td>
							<td align="center" style="height: 35px;">范围</td>
							<td align="center">31~55</td>
							<td align="center">12~25</td>
						</tr>
						<tr>
							<td align="center" style="height: 35px;">中值</td>
							<td align="center">43</td>
							<td align="center">19</td>
						</tr>
						<tr>
							<td align="center">计算值</td>
							<td align="center">
								<el-form-item prop="bigCityConcreteValue">
									<el-input v-model="form.bigCityConcreteValue" :disabled="form.ratioType != '0'" />
								</el-form-item>
							</td>
							<td align="center">
								<el-form-item prop="bigCityMasonryValue">
									<el-input v-model="form.bigCityMasonryValue" :disabled="form.ratioType != '0'" />
								</el-form-item>
							</td>
						</tr>
						<tr>
							<td align="center" :rowspan="3">
								<el-radio v-model="form.ratioType" label="1" @change="handleCheckedCitiesChange"><span></span></el-radio>
							</td>
							<td align="center" :rowspan="3">中等城市</td>
							<td align="center" style="height: 35px;">范围</td>
							<td align="center">17~35</td>
							<td align="center">5~11</td>
						</tr>
						<tr>
							<td align="center" style="height: 35px;">中值</td>
							<td align="center">26</td>
							<td align="center">8</td>
						</tr>
						<tr>
							<td align="center">计算值</td>
							<td align="center">
								<el-form-item prop="mediumCityConcreteValue">
									<el-input v-model="form.mediumCityConcreteValue" :disabled="form.ratioType != '1'" />
								</el-form-item>
							</td>
							<td align="center">
								<el-form-item prop="mediumCityMasonryValue">
									<el-input v-model="form.mediumCityMasonryValue" :disabled="form.ratioType != '1'" />
								</el-form-item>
							</td>
						</tr>
						<tr>
							<td align="center" :rowspan="3">
								<el-radio v-model="form.ratioType" label="2" @change="handleCheckedCitiesChange"><span></span></el-radio>
							</td>
							<td align="center" :rowspan="3">小城市</td>
							<td align="center" style="height: 35px;">范围</td>
							<td align="center">8~15</td>
							<td align="center">2~5</td>
						</tr>
						<tr>
							<td align="center" style="height: 35px;">中值</td>
							<td align="center">12</td>
							<td align="center">4</td>
						</tr>
						<tr>
							<td align="center">计算值</td>
							<td align="center">
								<el-form-item prop="smallCityConcreteValue">
									<el-input v-model="form.smallCityConcreteValue" :disabled="form.ratioType != '2'" />
								</el-form-item>
							</td>
							<td align="center">
								<el-form-item prop="smallCityMasonryValue">
									<el-input v-model="form.smallCityMasonryValue" :disabled="form.ratioType != '2'" />
								</el-form-item>
							</td>
						</tr>
					</table>
				</el-form>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-row style="margin-top: 20px;margin-bottom: 20px;">
			<el-col :span="16">
				<el-row justify="space-between">
					<span style="font-size: 16px;font-weight: bold;">&nbsp;&nbsp;2）计算中高档装修总面积(平米)（计算公式：Sd=Sh×Ɛ ）</span>
					<el-button type="primary" @click="handleQuery">计算</el-button>
				</el-row>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="16">
				<el-table v-loading="loading" :data="dataList" stripe>
					<el-table-column label="评估子区名称" align="center" prop="xstmName" />
					<el-table-column label="钢筋混凝土房屋装修总面积" align="center" prop="concreteHouseArea" />
					<el-table-column label="砌体房屋装修总面积" align="center" prop="">
						<el-table-column label="III-1类" align="center" prop="masonryHouseArea1" />
						<el-table-column label="III-2类" align="center" prop="masonryHouseArea1" />
					</el-table-column>
					<el-table-column label="中高档装修总面积" align="center" prop="totalArea" />
				</el-table>
			</el-col>
		</el-row>
		<el-dialog title="计算公式" v-model="open" width="700px" append-to-body>
			<div style="font-size: 16px;">
				<p>每个评估子区应分别计算不同类别房屋在各破坏等级下的破坏比，计算方法应按下列步骤：</p>
				<p>a)分别统计一个评估子区内所有抽样点某类房屋遭受某种破坏等级的破坏面积之和A；</p>
				<p>b)分别统计该评估子区内某类房屋总建筑面积S；</p>
				<p>c)评估子区内某类房屋遭受某种破坏等级的破坏比为A/S。</p>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="decorationTotalArea">
import useEventStore from "@/store/modules/event";
import { mhFinishHouseCount, getEvaluationSubArea, getMhFinishHouseByXsemId, getMhFinishHouseByXstmId, updateMhFinishHouseArea } from "@/api/directLossAssess/decorationTotalArea.js"
const {
	proxy
} = getCurrentInstance();
const dataList = ref([]);
const loading = ref(false);
const open = ref(false);
const concreteValue = ref("");
const masonryValue = ref("");
const currentEvent = computed(() => useEventStore().currentEvent);
const validator31_55 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 55 && value >= 31)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator12_25 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 25 && value >= 12)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator17_35 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 35 && value >= 17)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator5_11 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 11 && value >= 5)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator8_15 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 15 && value >= 8)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator2_5 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 5 && value >= 2)) {
		callback(new Error());
	} else {
		callback();
	}
}
const data = reactive({
	queryParams: {
		xstmId: undefined,
		evaluationSubareaName: ""
	},
	form: {
		bigCityConcreteValue: "43",
		bigCityMasonryValue: "19",
		mediumCityConcreteValue: "26",
		mediumCityMasonryValue: "8",
		smallCityConcreteValue: "12",
		smallCityMasonryValue: "4",
	},
	rules: {
		bigCityConcreteValue: [{
			required: true,
			message: errormessage31_55,
			trigger: "blur",
			validator: validator31_55
		}],
		bigCityMasonryValue: [{
			required: true,
			message: errormessage12_25,
			trigger: "blur",
			validator: validator12_25
		}],
		mediumCityConcreteValue: [{
			required: true,
			message: errormessage17_35,
			trigger: "blur",
			validator: validator17_35
		}],
		mediumCityMasonryValue: [{
			required: true,
			message: errormessage5_11,
			trigger: "blur",
			validator: validator5_11
		}],
		smallCityConcreteValue: [{
			required: true,
			message: errormessage8_15,
			trigger: "blur",
			validator: validator8_15
		}],
		smallCityMasonryValue: [{
			required: true,
			message: errormessage2_5,
			trigger: "blur",
			validator: validator2_5
		}],

	}
})
const {
	queryParams,
	form,
	rules
} = toRefs(data)
function errormessage31_55() {
	proxy.$modal.msgWarning("请输入范围31~55之间的值");
}
function errormessage12_25() {
	proxy.$modal.msgWarning("请输入范围12~25之间的值");
}
function errormessage17_35() {
	proxy.$modal.msgWarning("请输入范围17~35之间的值");
}
function errormessage5_11() {
	proxy.$modal.msgWarning("请输入范围5~11之间的值");
}
function errormessage8_15() {
	proxy.$modal.msgWarning("请输入范围8~15之间的值");
}
function errormessage2_5() {
	proxy.$modal.msgWarning("请输入范围2~5之间的值");
}
function handleCheckedCitiesChange(value) {
	if (value == "0") {
		concreteValue.value = form.value.bigCityConcreteValue;
		masonryValue.value = form.value.bigCityMasonryValue;
	} else if (value == "1") {
		concreteValue.value = form.value.mediumCityConcreteValue;
		masonryValue.value = form.value.mediumCityMasonryValue;
	} else if (value == "2") {
		concreteValue.value = form.value.smallCityConcreteValue;
		masonryValue.value = form.value.smallCityMasonryValue;
	}
}

// 计算
function handleQuery() {
	if (!form.value.ratioType) {
		proxy.$modal.msgWarning("请选择城市规模");
		return
	}
	getList();
}
function getList() {
	loading.value = true;
	mhFinishHouseCount({
		xsemId: currentEvent.value.id,
		concreteValue: concreteValue.value,
		masonryValue: masonryValue.value,
		ratioType: form.value.ratioType
	}).then(response => {
		// proxy.$modal.msgSuccess(response.message);
		getMhFinishHouseByXsemIdData();
		loading.value = false;
	}).catch(err=>{loading.value = false});
}

function changeSubarea(id) {
	getMhFinishHouseByXstmIdData(id);
}

// 修改
function handleUpdate() {
	form.value.xsemId = currentEvent.value.id;
	form.value.type = "0";
	updateMhFinishHouseArea(form.value).then(res => {
		proxy.$modal.msgSuccess("修改成功");
		//getMhFinishHouseByXstmIdData(res.data.xstmId);
	})
}

function getMhFinishHouseByXsemIdData() {
	getMhFinishHouseByXsemId(currentEvent.value.id).then(response => {
		dataList.value = response.data ? response.data : [];
		form.value.ratioType = dataList.value[0]?.ratioType
		handleCheckedCitiesChange(form.value.ratioType)
	});
}
function getMhFinishHouseByXstmIdData() {
	getMhFinishHouseByXstmId(currentEvent.value.id, '0').then(response => {
		if (response.data) {
			form.value = response.data;
		} else {
			form.value.bigCityConcreteValue = "43";
			form.value.bigCityMasonryValue = "19";
			form.value.mediumCityConcreteValue = "26";
			form.value.mediumCityMasonryValue = "8";
			form.value.smallCityConcreteValue = "12";
			form.value.smallCityMasonryValue = "4";
		}
	});
}
watch(() => currentEvent.value, async () => {
	if (currentEvent.value?.id) {
		await getMhFinishHouseByXstmIdData();
		getMhFinishHouseByXsemIdData();
	}
}, { immediate: true })
</script>

<style scoped lang="scss">
.title {
	margin: 0 0 20px !important;
}

table td {
	border: 1px solid #c6c6c6;
}

:deep(table .el-form-item--default) {
	margin-bottom: 0px !important;
}

:deep(.el-form-item__error) {
	display: none !important;
}

:deep(.el-input__inner) {
	text-align: center !important;
}
</style>